<template>
  <div v-show="polygon.isActive">
    <PanelButton name="关闭多边形" @click="polygon.complete"/>
    <PanelButton name="删除多边形" @click="polygon.deletePolygon"/>
    <PanelToggle name="指导线" v-model="polygon.polygon.guidance"/>
    <PanelToggle name="自动选择颜色" v-model="polygon.color.auto"/>
    <PanelToggle
        v-show="polygon.color.auto"
        name="只有黑色或白色"
        v-model="polygon.color.blackOrWhite"
    />
    <PanelInputString
        name="描边颜色"
        v-model="polygon.polygon.pathOptions.strokeColor"
    />
    <PanelInputNumber
        name="自动完成距离"
        min="0"
        max="1000"
        step="5"
        v-model="polygon.polygon.completeDistance"
    />
    <PanelInputNumber
        name="最小距离"
        min="0"
        max="500"
        step="2"
        v-model="polygon.polygon.minDistance"
    />
  </div>
</template>

<script>
import PanelButton from "@/components/PanelButton";
import PanelToggle from "@/components/PanelToggle";
import PanelInputString from "@/components/PanelInputString";
import PanelInputNumber from "@/components/PanelInputNumber";

export default {
  name: "PolygonPanel",
  components: { PanelButton, PanelToggle, PanelInputString, PanelInputNumber },
  props: {
    polygon: {
      type: Object,
      required: true
    }
  }
};
</script>
